<template>
  <div id="hotview">
    <div
      v-for="(item, ind) in year"
      :key="ind"
      style="width: 18px; height: 12%; border: 1px solid #fff"
    >
      <div
        :class="[
          item ? 'box' : 'nobox',
          itemdate.indexOf(ind) != -1
            ? item.num < 3
              ? 'light'
              : item.num < 5
              ? 'blod'
              : item.num < 10
              ? 'bloder'
              : 'deep'
            : '',
        ]"
      >
        <div class="info">
          {{ item ? item.date : "" }}
          完成了{{ item ? item.num : "" }}个任务
        </div>
      </div>
      <div
        v-if="ind % 28 == 0 && ind != 0"
        style="
          position: absolute;
          top: -20px;
          font-size: 10px;
          width: 30px;
          text-align: center;
          margin-left: -35px;
        "
      >
        {{ item ? Number(item.date.substring(5, 7)) + "月" : "" }}
      </div>
      <div
        v-if="ind == 0"
        style="position: absolute; top: 0px; font-size: 10px; left: -30px"
      >
        周日
      </div>
      <div
        v-if="ind == 3"
        style="position: absolute; top: 63px; font-size: 10px; left: -30px"
      >
        周三
      </div>
      <div
        v-if="ind == 6"
        style="position: absolute; bottom: 15px; font-size: 10px; left: -30px"
      >
        周六
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      year: [],
      itemdate: [],
    };
  },
  methods: {
    getdate() {
      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth();
      let week, startmonth;
      if (month >= 6) {
        week = new Date(`${year}-6-1`).getDay();
        startmonth = 5;
      } else {
        week = new Date(`${year}-1-1`).getDay();
        startmonth = 0;
      }
      let days = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
      if ((year % 100 == 0 && year % 400 == 0) || year % 4 == 0) {
        days[1] = 29;
      }

      let temp = startmonth + 7;
      for (let i = startmonth; i < temp; i++) {
        for (let j = 1; j <= days[i]; j++) {
          this.year[week++] = {
            date: `${year}-${i + 1 < 10 ? "0" + (i + 1) : i + 1}-${
              j < 10 ? "0" + j : j
            }`,
            num: 0,
          };
        }
      }
    },
    dateformat(t) {
      if (t < 10) {
        return "0" + t;
      }
    },
    async gethot() {
      try {
        let res = await this.axios.post("/item/gethot");
        let reslist = res.data.data;
        reslist.forEach((e) => {
          let date = new Date(new Date(e.allstart).getTime());
          let datetime = `${date.getFullYear()}-${this.dateformat(
            date.getMonth() + 1
          )}-${this.dateformat(date.getDate())}`;
          e.allstart = datetime;
        });
        this.year.forEach((e) => {
          reslist.forEach((a) => {
            if (a.allstart == e.date) {
              let ind = this.year.indexOf(e);
              this.itemdate.push(ind);
              this.year[ind].num = a.num;
            }
          });
        });
      } catch (error) {}
    },
  },
  created() {
    this.getdate();
    this.gethot();
  },
};
</script>

<style scoped>
#hotview {
  width: 100%;
  height: 100%;
  /* overflow: hidden; */
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  position: relative;
}
.box {
  width: 100%;
  height: 100%;
  background-color: #eeeeee;
  position: relative;
}
.info {
  font-size: 12px;
  cursor: pointer;
  width: 180px;
  height: 30px;
  position: absolute;
  border-radius: 20px;
  box-shadow: 0 0 9px rgb(163, 160, 160);
  top: -35px;
  left: -80px;
  display: none;
  z-index: 4;
  text-align: center;
  line-height: 30px;
  background-color: #fff;
}
.box:hover .info {
  display: block;
}

.nobox {
  width: 18px;
  height: 12%;
  border: 1px solid #fff;
}
.light {
  background-color: rgb(99, 202, 99);
}
.blod {
  background-color: rgb(74, 140, 74);
}
.bloder {
  background-color: rgb(52, 117, 52);
}
.deep {
  background-color: rgb(23, 88, 23);
}
</style>
